<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>发布</h1>
					<div id="box1" class="box">
						<h2>1. 为什么要发布</h2>
						<ol>
							<li>小程序只有发布之后，才能被用户搜索并使用</li>
							<li>开发期间的小程序为了便于调试，含有 sourcemap 相关的文件，并且代码没有被压缩，因此体积较大，不适合直接当作线上版本进行发布</li>
							<li>通过执行 “小程序发布”，能够优化小程序的体积，提高小程序的运行性能</li>
						</ol>
					</div>
					<div class="box" id="box2">
						<h2>2. 发布小程序的流程</h2>
						<ol>
							<li>
								<p>点击 HBuilderX 菜单栏上的 发行 -> 小程序-微信(仅适用于uni-app)：</p>
								<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮：</p>
								<el-image style="width: 100%;" :src="srcList[1]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在 HBuilderX 的控制台中查看小程序发布编译的进度：</p>
								<el-image style="width: 100%;" :src="srcList[2]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时，点击工具栏上的上传按钮：</p>
								<el-image style="width: 100%;" :src="srcList[3]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>填写版本号和项目备注之后，点击上传按钮：</p>
								<el-image style="width: 100%;" :src="srcList[4]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>上传完成之后，会出现如下的提示消息，直接点击确定按钮即可：</p>
								<el-image style="width: 100%;" :src="srcList[5]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>通过微信开发者工具上传的代码，默认处于版本管理的开发版本列表中，如图所示：</p>
								<el-image style="width: 100%;" :src="srcList[6]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>将 开发版本提交审核 -> 再将 审核通过的版本发布上线，即可实现小程序的发布和上线：</p>
								<el-image style="width: 100%;" :src="srcList[7]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
						</ol>
					</div>
					<div class="box" id="box3">
						<h2>3. 发布为 Android App 的流程</h2>
						<ol>
							<li>
								<p>点击 HBuilderX 状态栏左侧的未登录按钮，弹出登录的对话框：</p>
								<el-image style="width: 100%;" :src="srcList[8]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在弹出的登录对话框中，填写账号和密码之后，点击登录即可：</p>
								<el-image style="width: 100%;" :src="srcList[9]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>打开项目根目录中的 manifest.json 配置文件，在基础配置面板中，获取uni-app 应用标识，并填写应用名称：</p>
								<el-image style="width: 100%;" :src="srcList[10]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>切换到 App 图标配置面板，点击浏览按钮，选择合适的图片之后，再点击自动生成所有图标并替换即可：</p>
								<el-image style="width: 100%;" :src="srcList[11]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>点击菜单栏上的 发行 -> 原生 App-云打包：</p>
								<el-image style="width: 100%;" :src="srcList[12]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>勾选打包配置如下：</p>
								<el-image style="width: 100%;" :src="srcList[13]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>在控制台中查看打包的进度信息：</p>
								<el-image style="width: 100%;" :src="srcList[14]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>点击链接下载 apk 的安装包，并安装到 Android 手机中查看打包的效果。</p>
								<div class="tip">
									注意：由于开发期间没有进行多端适配，所以有些功能在 App 中无法正常运行，例如：选择收货地址、微信登录、微信支付
								</div>
							</li>
						</ol>
					</div>


				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer' :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 为什么要发布"></a-anchor-link>
					<a-anchor-link href="#box2" title="2. 发布小程序的流程"></a-anchor-link>
					<a-anchor-link href="#box3" title="3. 发布为 Android App 的流程"></a-anchor-link>
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import img1 from '@/assets/img4/publishView1.png'
	import img2 from '@/assets/img4/publishView2.png'
	import img3 from '@/assets/img4/publishView3.png'
	import img4 from '@/assets/img4/publishView4.png'
	import img5 from '@/assets/img4/publishView5.png'
	import img6 from '@/assets/img4/publishView6.png'
	import img7 from '@/assets/img4/publishView7.png'
	import img8 from '@/assets/img4/publishView8.png'
	import img9 from '@/assets/img4/publishView9.png'
	import img10 from '@/assets/img4/publishView10.png'
	import img11 from '@/assets/img4/publishView11.png'
	import img12 from '@/assets/img4/publishView12.png'
	import img13 from '@/assets/img4/publishView13.png'
	import img14 from '@/assets/img4/publishView14.png'
	import img15 from '@/assets/img4/publishView15.png'
	export default {
		name: 'publishView',
		data() {
			return {
				srcList: [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				}
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
